<template>
	<view class="container1" v-if="!login">
		<button class="denglu" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">本机号码一键登录 </button>
	</view>
	<view class="container" v-else>
		<view class="user_bg">
			<view class="user">
				<view class="user_avatar">
					<image src="https://pic.fhshidai.com/user/avatar.png"></image>
				</view>
				<view class="user_desc">
					<view> 用户</view>
					<view> {{phoneSeparated(userInfo.mobile)}}</view>
				</view>
			</view>
		</view>

		<view class="user_list">
			<navigator url="/pages/user/liulan/liulan" class="item">
				<view class="iconfont icon-ico_yueduliang icon-red size-27"></view>
				<view class="item-title">浏览记录</view>
				<view class="iconfont icon-qianjin item-logo  "></view>
			</navigator>
			<navigator url="/pages/user/shoucang/shoucang" class="item">
				<view class="iconfont icon-shoucang icon-red size-27"></view>
				<view class="item-title">收藏记录</view>
				<view class="iconfont icon-qianjin item-logo  "></view>
			</navigator>
			<navigator url="/pages//pages/jianjie/jianjie" class="item">
				<view class="iconfont icon-shoucang icon-red size-27"></view>
				<view class="item-title">公司简介</view>
				<view class="iconfont icon-qianjin item-logo  "></view>
			</navigator>
		</view>
		<view class="tuichu">

			<view class="out" @click="tuichu">退出登录</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				login: true,
				session_key: ''
			}
		},

		onShow() {

			let token = uni.getStorageSync('token')
			let session_key = uni.getStorageSync('session_key')
			if (!session_key) {
				uni.login({

					success: (code) => {
						console.log(code)
						//#ifdef MP-WEIXIN
						this.$api.loginCode({
							code: code.code,
							type: 0
						}).then(res => {
							this.userInfo = res.data
							getApp().globalData.userInfo = res.data
							uni.setStorageSync('session_key', res.data.session_key)
						})
						//#endif
						//#ifdef MP-TOUTIAO
						this.$api.loginCode({
							code: code.code,
							type: 1
						}).then(res => {
							this.userInfo = res.data
							getApp().globalData.userInfo = res.data
							uni.setStorageSync('session_key', res.data.session_key)
						})
						//#endif
						//#ifdef MP-BAIDU
						this.$api.loginCode({
							code: code.code,
							type: 2
						}).then(res => {
							this.userInfo = res.data
							getApp().globalData.userInfo = res.data
							uni.setStorageSync('session_key', res.data.session_key)
						})
						//#endif
					}
				})
			}
			if (token) {
				this.$api.me().then(
					res => {
						this.userInfo = res.data

					})
				this.login = true
			} else {
				// #ifdef MP-TOUTIAO

				if (!token) {
					uni.reLaunch({
						url: "/pages/login/login"
					})
				}
				// #endif
				// #ifdef H5

				if (!token) {
					uni.reLaunch({
						url: "/pages/login/login"
					})
				}
				// #endif
				this.login = false

				/* 	uni.hideTabBar({
						animation:true
					}) */

				uni.checkSession({

					fail: () => {

						uni.login({

							success: (code) => {
								console.log(code)
								//#ifdef MP-WEIXIN
								this.$api.loginCode({
									code: code.code,
									type: 0
								}).then(res => {
									this.userInfo = res.data
									getApp().globalData.userInfo = res.data
									uni.setStorageSync('session_key', res.data.session_key)
								})
								//#endif
								//#ifdef MP-BAIDU
								this.$api.loginCode({
									code: code.code,
									type: 2
								}).then(res => {
									console.log(res)
									this.userInfo = res.data
									getApp().globalData.userInfo = res.data
									uni.setStorageSync('session_key', res.data.session_key)
								})
								//#endif
								//#ifdef MP-TOUTIAO
								this.$api.loginCode({
									code: code.code,
									type: 1
								}).then(res => {
									this.userInfo = res.data
									getApp().globalData.userInfo = res.data
									uni.setStorageSync('session_key', res.data.session_key)
								})
								//#endif

							}
						})
					}
				})
			}
		},
		methods: {
			phoneSeparated(phoneNumber) {

				let tel = phoneNumber;


				tel = tel.substring(0, 3) + '-' + tel.substring(3, 7) + '-' + tel.substring(7, 11);



				return tel;

			},
			tuichu() {
				uni.setStorageSync('token', '')
				//#ifdef MP-TOUTIAO
				uni.navigateTo({
					url: "/pages/login/login"
				})
				//#endif

				this.login = false
				uni.showToast({
					title: '退出成功',
					success: () => {

					}
				})
			},
			getPhoneNumber(event) {
				console.log(event)
				if (event.detail.errMsg && event.detail.errMsg == "getPhoneNumber:fail") {
					uni.showToast({
						icon: "none",
						title: '没有权限'
					})

					return
				}
				//#ifdef MP-WEIXIN
				this.$api.phone({
					type: 0,
					session: uni.getStorageSync('session_key'),
					iv: event.detail.iv,
					encryptedData: event.detail.encryptedData
				}).then(res => {
					this.userInfo = res.data
					this.login = true
					uni.showTabBar({
						animation: true
					})
					uni.setStorageSync('token', res.token)
					uni.showToast({
						title: '登录成功',
						success: () => {

						}
					})

				})
				//#endif
				//#ifdef MP-BAIDU
				this.$api.phone({
					type: 2,
					session: uni.getStorageSync('session_key'),
					iv: event.detail.iv,
					encryptedData: event.detail.encryptedData
				}).then(res => {
					console.log(res)
					this.userInfo = res.data
					this.login = true
					uni.showTabBar({
						animation: true
					})
					uni.setStorageSync('token', res.token)
					uni.showToast({
						title: '登录成功',
						success: () => {

						}
					})

				})
				//#endif

				//#ifdef MP-TOUTIAO

				this.$api.phone({
					type: 1,
					session: uni.getStorageSync('session_key'),
					iv: event.detail.iv,
					encryptedData: event.detail.encryptedData
				}).then(res => {
					this.userInfo = res.data
					this.login = true
					uni.showTabBar({
						animation: true
					})
					uni.setStorageSync('token', res.token)
					uni.showToast({
						title: '登录成功',
						success: () => {

						}
					})

				})

				//#endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container1 {
		background: url(https://pic.fhshidai.com/fileTLONdGy5PcqB4FclVheo9wI6pPZo5mSTktjebXy7.png) no-repeat 0rpx -70rpx;
		;
		background-size: 750rpx 1279rpx;
		width: 750rpx;
		height: 1150rpx;
		text-align: center;
		padding-top: 850rpx;

		.denglu {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 29rpx;

			color: #FFFFFF;
			font-weight: 500;
			width: 603rpx;
			height: 90rpx;
			background: rgba(224, 57, 61, 1);
			border-radius: 45rpx;
		}
	}

	.tuichu {
		width: 100%;
		height: 90rpx;
		margin-top: 100rpx;
		display: flex;
		justify-content: center;

		.out {
			width: 608rpx;
			height: 90rpx;
			background: rgba(247, 247, 247, 1);
			border-radius: 45rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 29rpx;
			font-family: SourceHanSansCN;
			font-weight: 500;
			color: rgba(73, 73, 73, 1);

		}
	}

	.container {
		padding-left: 33rpx;
		padding-right: 33rpx;

		.user_bg {
			background: url(https://wx2.sbimg.cn/2020/06/11/bg.md.png);
			background-size: 686rpx 242rpx;
			width: 686rpx;
			height: 242rpx;
			display: flex;
			align-items: center;

			.user {
				height: 130rpx;
				padding-left: 38rpx;
				display: flex;
				align-items: center;

				.user_avatar {
					background: #ffffff;
					border-radius: 128rpx;
					height: 128rpx;
					width: 128rpx;
					margin-right: 50rpx;

					image {
						height: 128rpx;
						width: 128rpx;
					}
				}

				.user_desc {
					display: flex;
					flex-direction: column;
					color: #ffffff;
					font-size: 34rpx;
					line-height: 50rpx;
					font-weight: bold;
				}
			}
		}

		.user_list {
			margin-top: 30rpx;

			.item {
				height: 132rpx;
				display: flex;
				padding-left: 31rpx;
				align-items: center;
				border-bottom: 2rpx solid #f3f3f3;

				.item-title {
					color: #000000;
					font-size: 30rpx;
					padding-left: 22rpx;
					width: 563rpx;
				}

				.item-logo {
					font-size: 26rpx;
					color: #bfbfbf;
				}
			}
		}
	}

	.size-27 {
		font-size: 27rpx;
	}
</style>
